<route lang="jsonc">
{
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "我的",
  },
}
</route>

<template>
  <view class="profile-settings">
    <!-- 自定义导航栏 -->
    <wd-navbar
      title="个人设置"
      left-arrow
      @click-left="goBack"
      :style="{ paddingTop: statusBarHeight + 'px' }"
    />

    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 头像设置 -->
      <view class="avatar-section">
        <wd-cell title="头像" is-link @click="changeAvatar">
          <template #value>
            <view class="avatar-container">
              <image
                class="avatar"
                :src="userInfo.avatar || '/static/default-avatar.png'"
                mode="aspectFill"
              />
            </view>
          </template>
        </wd-cell>
      </view>

      <!-- 用户信息表单 -->
      <view class="info-section">
        <wd-cell-group>
          <!-- 号码 -->
          <wd-cell title="号码" :value="userInfo.phone" />

          <!-- 昵称 -->
          <wd-cell
            title="昵称"
            :value="userInfo.nickname"
            is-link
            @click="editNickname"
          />

          <!-- 性别 -->
          <wd-cell
            title="性别"
            :value="userInfo.gender"
            is-link
            @click="selectGender"
          />

          <!-- 生日 -->
          <wd-cell
            title="生日"
            :value="userInfo.birthday"
            is-link
            @click="selectBirthday"
          />

          <!-- 身高 -->
          <wd-cell
            title="身高"
            :value="userInfo.height || '请选择'"
            is-link
            @click="selectHeight"
          />

          <!-- 体重 -->
          <wd-cell
            title="体重"
            :value="userInfo.weight || '请选择'"
            is-link
            @click="selectWeight"
          />

          <!-- 感情状况 -->
          <wd-cell
            title="感情状况"
            :value="userInfo.relationship || '请选择'"
            is-link
            @click="selectRelationship"
          />

          <!-- 所在城市 -->
          <!-- <wd-cell
            title="所在城市"
            :value="userInfo.city || '请选择'"
            is-link
            @click="selectCity"
          /> -->
          <wd-col-picker
            label="地址"
            placeholder="请选择地址"
            label-width="100px"
            prop="address"
            v-model="userInfo.city"
            :columns="area"
            :column-change="areaChange"
          />
        </wd-cell-group>
      </view>

      <!-- 账户设置 -->
      <view class="account-section">
        <wd-cell-group>
          <wd-cell title="修改密码" is-link @click="changePassword" />
          <wd-cell title="注销账号" is-link @click="deleteAccount" />
        </wd-cell-group>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <wd-button
        type="primary"
        size="large"
        block
        custom-style="background: #000; border-radius: 25px; margin: 0 20px;"
        @click="logout"
      >
        退出登录
      </wd-button>
    </view>

    <!-- 弹出层 - 昵称编辑 -->
    <wd-popup v-model="showNicknamePopup" position="center">
      <view class="popup-content">
        <view class="popup-title">修改昵称</view>
        <wd-input
          v-model="tempNickname"
          placeholder="请输入昵称"
          maxlength="20"
        />
        <view class="popup-buttons">
          <wd-button @click="showNicknamePopup = false">取消</wd-button>
          <wd-button type="primary" @click="saveNickname">确定</wd-button>
        </view>
      </view>
    </wd-popup>

    <!-- 选择器 - 性别 -->
    <wd-action-sheet
      v-if="showGenderPicker"
      v-model="showGenderPicker"
      :actions="genderOptions"
      @select="onGenderSelect"
    />

    <!-- 日期选择器 - 生日 -->
    <wd-datetime-picker
      v-if="showDatePicker"
      v-model="showDatePicker"
      type="date"
      :value="selectedDate"
      @confirm="onDateConfirm"
      @cancel="showDatePicker = false"
    />

    <!-- 选择器 - 身高 -->
    <wd-picker
      v-if="showHeightPicker"
      v-model="showHeightPicker"
      :columns="heightColumns"
      @confirm="onHeightConfirm"
      @cancel="showHeightPicker = false"
    />

    <!-- 选择器 - 体重 -->
    <wd-picker
      v-if="showWeightPicker"
      v-model="showWeightPicker"
      :columns="weightColumns"
      @confirm="onWeightConfirm"
      @cancel="showWeightPicker = false"
    />

    <!-- 选择器 - 感情状况 -->
    <wd-action-sheet
      v-if="showRelationshipPicker"
      v-model="showRelationshipPicker"
      :actions="relationshipOptions"
      @select="onRelationshipSelect"
    />
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// 状态栏高度
const statusBarHeight = ref(0);

// 用户信息
const userInfo = reactive({
  avatar: '',
  phone: '86137****2214',
  nickname: '王俊凯',
  gender: '女生',
  birthday: '2001年10月16日',
  height: '',
  weight: '',
  relationship: '',
  city: '',
});

// 弹出层控制
const showNicknamePopup = ref(false);
const showGenderPicker = ref(false);
const showDatePicker = ref(false);
const showHeightPicker = ref(false);
const showWeightPicker = ref(false);
const showRelationshipPicker = ref(false);

// 临时数据
const tempNickname = ref('');
const selectedDate = ref(new Date());

// 选项数据
const genderOptions = ref([
  { name: '男生', value: 'male' },
  { name: '女生', value: 'female' },
  { name: '保密', value: 'secret' },
]);

const relationshipOptions = ref([
  { name: '单身', value: 'single' },
  { name: '恋爱中', value: 'dating' },
  { name: '已婚', value: 'married' },
  { name: '保密', value: 'secret' },
]);

// 身高选项 (150-200cm)
const heightColumns = ref([
  Array.from({ length: 51 }, (_, i) => ({
    label: `${150 + i}cm`,
    value: 150 + i,
  })),
]);

// 体重选项 (40-120kg)
const weightColumns = ref([
  Array.from({ length: 81 }, (_, i) => ({
    label: `${40 + i}kg`,
    value: 40 + i,
  })),
]);

onMounted(() => {
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 0;
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 更换头像
const changeAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      userInfo.avatar = res.tempFilePaths[0];
      // 这里可以上传到服务器
    },
  });
};

// 编辑昵称
const editNickname = () => {
  tempNickname.value = userInfo.nickname;
  showNicknamePopup.value = true;
};

const saveNickname = () => {
  if (tempNickname.value.trim()) {
    userInfo.nickname = tempNickname.value.trim();
    showNicknamePopup.value = false;
  }
};

// 选择性别
const selectGender = () => {
  showGenderPicker.value = true;
};

const onGenderSelect = (item) => {
  userInfo.gender = item.name;
  showGenderPicker.value = false;
};

// 选择生日
const selectBirthday = () => {
  showDatePicker.value = true;
};

const onDateConfirm = (value) => {
  const date = new Date(value);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  // 计算星座
  const constellation = getConstellation(month, day);
  userInfo.birthday = `${year}年${month}月${day}日${constellation}`;
  showDatePicker.value = false;
};

// 选择身高
const selectHeight = () => {
  showHeightPicker.value = true;
};

const onHeightConfirm = (value) => {
  userInfo.height = `${value[0]}cm`;
  showHeightPicker.value = false;
};

// 选择体重
const selectWeight = () => {
  showWeightPicker.value = true;
};

const onWeightConfirm = (value) => {
  userInfo.weight = `${value[0]}kg`;
  showWeightPicker.value = false;
};

// 选择感情状况
const selectRelationship = () => {
  showRelationshipPicker.value = true;
};

const onRelationshipSelect = (item) => {
  userInfo.relationship = item.name;
  showRelationshipPicker.value = false;
};

// 选择城市
const selectCity = () => {
  // 这里可以集成城市选择器或跳转到城市选择页面
  uni.showToast({
    title: '城市选择功能待开发',
    icon: 'none',
  });
};

// 修改密码
const changePassword = () => {
  uni.navigateTo({
    url: '/pages/change-password/change-password',
  });
};

// 注销账号
const deleteAccount = () => {
  uni.showModal({
    title: '确认注销',
    content: '注销后将无法恢复，确定要注销账号吗？',
    success: (res) => {
      if (res.confirm) {
        // 执行注销逻辑
        console.log('注销账号');
      }
    },
  });
};

// 退出登录
const logout = () => {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除登录状态
        uni.removeStorageSync('token');
        uni.reLaunch({
          url: '/pages/login/login',
        });
      }
    },
  });
};

// 计算星座
const getConstellation = (month, day) => {
  const constellations = [
    '水瓶座',
    '双鱼座',
    '白羊座',
    '金牛座',
    '双子座',
    '巨蟹座',
    '狮子座',
    '处女座',
    '天秤座',
    '天蝎座',
    '射手座',
    '摩羯座',
  ];
  const dates = [20, 19, 21, 21, 21, 22, 23, 23, 23, 24, 23, 22];

  if (day < dates[month - 1]) {
    return constellations[(month - 2 + 12) % 12];
  } else {
    return constellations[month - 1];
  }
};
</script>

<style lang="scss" scoped>
.profile-settings {
  min-height: 100vh;
  background: #ebebf0;
}

.content {
  padding-bottom: 100px;
}

.avatar-section {
  margin: 20px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.avatar-container {
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ff7675;
  }
}

.info-section,
.account-section {
  margin: 20px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.account-section {
  margin-top: 40px;
}

.logout-section {
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
}

.popup-content {
  padding: 30px;
  width: 300px;

  .popup-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
  }

  .popup-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;

    :deep(.wd-button) {
      flex: 1;
    }
  }
}

// 自定义样式
:deep(.wd-cell__value) {
  color: #999;
}

:deep(.wd-cell__title) {
  color: #333;
  font-weight: 500;
}
</style>
